<template>
  <div id="contract2019">
    <el-container>
      <el-main>
        <el-row >
        <el-form :inline="true" :model="form" class="demo-form-inline">
          <el-row class="floatLeft">
            <el-form-item label="合同编号">
              <el-input  placeholder="合同编号" v-model="form.contractNo" ></el-input>
            </el-form-item>
            <el-form-item label="合同名称">
              <el-input  placeholder="合同名称" v-model="form.contractName"></el-input>
            </el-form-item>
            <el-form-item label="发展人编码">
              <el-input placeholder="发展人编码" v-model="form.yzStaffId" ></el-input>
            </el-form-item >
            <el-form-item label="发展人名称">
              <el-input placeholder="发展人名称" v-model="form.accountManager"></el-input>
            </el-form-item>
          </el-row>
          <el-row class="floatLeft">
            <el-form-item label="网格编码">
              <el-input placeholder="网格编码" v-model="form.trellisCode"></el-input>
            </el-form-item>
            <el-form-item label="网格名称">
              <el-input placeholder="网格名称" v-model="form.trellisName"></el-input>
            </el-form-item>
            <el-form-item label="签约方式">
              <el-select v-model="form.signWay" filterable placeholder="请选择">
                <el-option
                  v-for="item in signWayData"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" size="small" @click="searchFn" icon="el-icon-search">搜索</el-button>
            </el-form-item>
          </el-row>
        </el-form>
        </el-row>
        <el-row class="floatLeft">
<!--          <el-button type="primary" size="small" plain>新增</el-button>-->
<!--          <el-button type="success" size="small"  plain>修改</el-button>-->
<!--          <el-button type="danger" size="small"  plain>删除</el-button>-->
          <el-button type="primary" size="small"  @click="dialogFormVisible = true">上传<i class="el-icon-upload el-icon--right"></i></el-button>
        </el-row>
        <el-table
          :header-cell-style="{background:'#eef1f6',color:'#606266'}"
          size="mini"
          :data="tableData"
          highlight-current-row
          border
          style="width: 100%"
          height="500">
          <el-table-column label="序号"
            type="index"
            width="50"></el-table-column>
          <el-table-column prop="contractNoGlobal" label="合同编号"></el-table-column>
          <el-table-column prop="contractName" label="合同名称"></el-table-column>
          <el-table-column prop="repositoryCode" label="客户编码"></el-table-column>
          <el-table-column prop="repositoryNameVendor" label="客户名称"></el-table-column>
          <el-table-column prop="businessCoding" label="电路编码"></el-table-column>
          <el-table-column prop="yzStaffId" label="发展人编码"></el-table-column>
          <el-table-column prop="accountManager" label="发展人名称"></el-table-column>
          <el-table-column prop="trellisCode" label="网格编码"></el-table-column>
          <el-table-column prop="trellisName" label="网格名称"></el-table-column>
          <el-table-column prop="signWay" label="签约方式"></el-table-column>
          <el-table-column prop="projectAmount" label="2019年收入合计"></el-table-column><!--，项目合同金额-->
          <el-table-column prop="month1" label="1月收入"></el-table-column>
          <el-table-column prop="month2" label="2月收入"></el-table-column>
          <el-table-column prop="month3" label="3月收入"></el-table-column>
          <el-table-column prop="month4" label="4月收入"></el-table-column>
          <el-table-column prop="month5" label="5月收入"></el-table-column>
          <el-table-column prop="month6" label="6月收入"></el-table-column>
          <el-table-column prop="month7" label="7月收入"></el-table-column>
          <el-table-column prop="month8" label="8月收入"></el-table-column>
          <el-table-column prop="month9" label="9月收入"></el-table-column>
          <el-table-column prop="month10" label="10月收入"></el-table-column>
          <el-table-column prop="month11" label="11月收入"></el-table-column>
          <el-table-column prop="month12" label="12月收入"></el-table-column>
          <el-table-column prop="remark1" label="备注1"></el-table-column>
          <el-table-column prop="remark2" label="备注2"></el-table-column>
          <el-table-column prop="inputDate" label="录入日期" :formatter="formatter"></el-table-column>
          <el-table-column prop="inputStaffId" label="录入人员"></el-table-column>
          <!--        <el-table-column-->
          <!--          label="操作"-->
          <!--        >-->
          <!--          <template slot-scope="scope">-->
          <!--            <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>-->
          <!--            <el-button type="text" size="small">编辑</el-button>-->
          <!--          </template>-->
          <!--        </el-table-column>-->
        </el-table>
        <el-pagination
          background
          layout="prev, pager, next"
          :total=total
          :hide-on-single-page="false"
          :page-size="10"
          @current-change="currentChange">
        </el-pagination>
        <el-dialog title="上传2019年合同快照" :visible.sync="dialogFormVisible">
          <el-upload
            class="upload-demo"
            action="http://10.68.9.138:8003/contract/upload"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            multiple
            :limit="3"
            :on-exceed="handleExceed"
            :file-list="fileList">
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传Excel.xlsx/xls文件</div>
          </el-upload>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
          </div>
        </el-dialog>
      </el-main>
    </el-container>
    <router-view/>
  </div>


</template>

<script>
  import '@/assets/supply.css'
  import axios from 'axios'
  import {formatDate} from '../../components/utils/formatDate'
  import {getUrlParams} from '../../components/utils/getUrlParams'
  import global from '../../components/utils/global'
  import {getBaseDataList} from '../../components/utils/getDataFn'

  export default {
    name: 'contract2019',
    created(){
      this.staffId = getUrlParams("staffId");
      getBaseDataList(1001,this);
      // getBaseDataList(2001,this);
    },
    methods: {
      handleClick (row) {
        console.log(row)
      },
      searchFn () {
        this.startSize = 0
        this.endSize = 11
        this.currentPage = 1
        this.queryContractList()
        this.queryContractListCount()
      },
      onSubmit () {
        this.queryContractList()
        this.queryContractListCount()
      },
      formatter(row, column) {
        row.inputDate = formatDate(new Date(row.inputDate),'yyyy-MM-dd')
        return row.inputDate;
      },
      queryContractList: function () {
        let _this = this
        _this.getQueryParams()
      debugger
        axios({
          methods: 'get',
          url: global.host+'/contract2019/queryContractList',
          params: {params: JSON.stringify(_this.queryParams)}
        }).then(res => {
          console.log(res)
          _this.tableData = res.data
        })
      },
      queryContractListCount: function () {
        let _this = this
        _this.getQueryParams()
        axios({
          methods: 'get',
          url: global.host+'/contract2019/queryContractListCount',
          params: {params: JSON.stringify(_this.queryParams)}
        }).then(res => {
          console.log(res)
          _this.total = res.data
        })
      },
      currentChange (cpage) {
        let _this = this
        _this.currentPage = cpage
        _this.startSize = cpage * 10 - 10
        _this.endSize = cpage * 10
        this.onSubmit()
      },
      getQueryParams () {
        this.queryParams = {
          startSize: this.startSize,
          endSize: this.endSize,
          contractName:this.form.contractName,
          contractNo:this.form.contractNo,
          yzStaffId:this.form.yzStaffId,
          accountManager:this.form.accountManager,
          trellisCode:this.form.trellisCode,
          trellisName:this.form.trellisName,
          signWay:this.form.signWay
        }
      },
      handleRemove (file, fileList) {
        console.log(file, fileList)
      },
      handlePreview (file) {
        console.log(file)
      },
      handleExceed (files, fileList) {
        this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
      },
      beforeRemove (file, fileList) {
        return this.$confirm(`确定移除 ${file.name}？`)
      }

    }
    ,
    data () {
      return {
        signWayData:[],
        tableData: [],
        total: 0,
        currentPage: 1,
        startSize: 0,
        endSize: 11,
        queryParams: {},
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: '最近一个月',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: '最近三个月',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }]
        },
        dates: [],
        dialogFormVisible: false,
        formLabelWidth: '120px',
        fileList: [],
        form:{
          contractName:'',
          contractNo:'',
          yzStaffId:'',
          accountManager:'',
          trellisCode:'',
          trellisName:'',
          signWay:''
        }
      }
    }
  }
</script>

<style>
  #contract2019 {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 20px;
  }

  html, body {
    height: auto;
  }
</style>
